<!DOCTYPE html>
<html>
<head lang="en">

    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
        #l-map{height:100%;width:100%;}
        #r-result{width:100%;}
    </style>

    <!--表单验证插件-->
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="layer/layer.js"></script>

    <!-- 导入百度地图api-->
    <script src="http://c.cnzz.com/core.php"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IGzpWg5FdrESE9j7BwbFtyGw"></script>
</head>
<body>
<style type="text/css">
    input, textarea {
        padding: 9px;
        border: solid 1px #E5E5E5;
        outline: 0;
        font: normal 13px/100% Verdana, Tahoma, sans-serif;
        width: 200px;
        background: #FFFFFF;
    }

    textarea {
        width: 400px;
        max-width: 400px;
        height: 150px;
        line-height: 150%;
    }

    input:hover, textarea:hover,
    input:focus, textarea:focus {
        border-color: #C9C9C9;
    }

    .form label {
        margin-left: 10px;
        color: #999999;
    }

    .submit input {
        width: auto;
        padding: 9px 15px;
        background: #617798;
        border: 0;
        font-size: 14px;
        color: #FFFFFF;
    }
</style>

<div id="l-map"></div>
<div id="r-result"></div>

<div style="position: absolute;right: 0px;top: 0px;">
    <a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=UmNjYmZhYmBkZGcSIyN8MT0-" style="text-decoration:none;"><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png"/></a>
</div>
<!--<form class="form" id="signupForm">

    <p class="name">
        <input class="required" type="text" name="name" id="name" />
        <label for="name">姓名</label>
    </p>

    <p class="email">
        <input class="required email" type="text" name="email" id="email" />
        <label for="email">邮箱</label>
    </p>

    <p class="name">
        <input type="text" name="phone" id="phone" />
        <label for="name">电话</label>
    </p>

    <p class="web">
        <input type="text" name="address" id="address" />
        <label for="address">地址</label>
    </p>

    <p class="text">
        <textarea name="text">您还想说：</textarea>
    </p>

    <p class="submit">
        <input type="button" onclick="submitMessage()" value="Send" />
    </p>

</form>-->
</body>
</html>
<!--验证：提交form-->
<script type="text/javascript">
    function submitMessage(){
        if($("#name").val()==""){
            layer.alert("姓名不能为空！");
            return false;
        }
        if($("#email").val()==""){
            layer.alert("邮箱不能为空！");
            return false;
        }
        if($("#phone").val()==""){
            layer.alert("电话不能为空！");
            return false;
        }
        $.ajax({
            type:"post",
            url:"ConnectionMeController.do?method=message",
            data:$(".form").serialize(),
            success:function(request){
                layer.confirm('提交成功！您还要继续呆在本页吗？', {
                    btn: ['呆一会吧','算了吧'] //按钮
                }, function(){
                    layer.msg('~@^_^@~', {
                        time: 2000, //2s后自动关闭
                    });
                }, function(){
                    //当你在iframe页面关闭自身时
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                })

            },error:function(request){
                layer.alert("提交失败！");
            }
        })
    }
</script>
<!--百度地图-->
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("l-map");            // 创建Map实例
    map.centerAndZoom(new BMap.Point(120.4210610000,36.1823160000 ), 11);
    var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map, panel: "r-result"}
    });

    //滑轮缩放
    map.enableScrollWheelZoom(true);

    var opts = {
        width: 250,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title: "地址:青岛李沧区金水路托普学校", // 信息窗口标题
        enableMessage: true//设置允许信息窗发送短息
    };
    var point = new BMap.Point(120.4210610000, 36.1823160000);
    var marker = new BMap.Marker(point);  // 创建标注
    map.addOverlay(marker);               // 将标注添加到地图中
    openInfo("姓名:李文斌 <br>电话:15092400841<br>邮箱:1104302665@qq.com", marker);
    function openInfo(content, e) {
        var p = e.target;
        var point = new BMap.Point(120.4210610000, 36.1823160000);
        var infoWindow = new BMap.InfoWindow(content == null ? "未知" : content, opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }


</script>